<!-- 首页 -->
<template>
	<view class="page-container">
    <view class="bg">
      <image class="img" :src="data.image"></image>
    </view>
    <view class="body-wrapper">
      <view class="action-section">
        <view @tap="handleSwitchChild">
          <u-icon name="arrow-left"></u-icon>
          <view class="text">切换</view>
        </view>
        <view @tap="handlePublish">
          <u-icon name="camera-fill"></u-icon>
        </view>
      </view>
      <view class="title">{{data.username}}</view>
      <view class="content">
        <view class="item">{{data.age}}</view>
        <view class="item">{{data.like}}个赞</view>
        <view class="item">{{data.comment}}条评论</view>
      </view>
    </view>
	</view>
</template>

<script>
  export default {
    props: {
      data: {
        type: Object,
        default: {},
      },
    },
    methods: {
      handleSwitchChild() {},
      handlePublish() {
        this.$Router.push('/pages/home/publish')
      },
    }
  };
</script>

<style lang="scss" scoped>
  .page-container {
    position: relative;
    width: 100%;
    height: 480rpx;
    
    .bg {
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.25);
      
      .img {
        width: 100%;
        height: 100%;
        opacity: 0.5;
      }
    }
    
    .body-wrapper {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      font-size: 34rpx;
      font-weight: 600;
      color: #FFFFFF;
      text-align: center;
      
      .action-section {
        display: flex;
        justify-content: space-between;
        margin: 32rpx;
        
        .u-icon {
          font-size: 40rpx;
        }
        
        .text {
          margin: 4rpx 0 0 10rpx;
          display: inline-block;
        }
      }
    
      .title {
        margin-top: 150rpx;
      }
      
      .content {
        display: flex;
        justify-content: space-around;
        width: 400rpx;
        margin: 16rpx auto 0;
        font-size: 20rpx;
      }
    }
  }
</style>
